<template>
	<view class="content">
		
		<scroll-view class="sv" :scroll-x="true" direction="horizontal" scroll-with-animation="true" :show-scrollbar="false">
			<view class="item" :class="index==navIndex?'active':''" v-for="(item,index) in menuList" :key="item.id"  @click="menuClick(index)">{{item.classname}}</view>
		</scroll-view>
			
		<view class="news_content">
			<view class="row" v-for="item in newsData" :key="item.id">
				<newsItem :item="{title:item.title,author:item.author,readCount:item.hits,imgUrl:item.picurl}" @click.native="newsClick"></newsItem>
			</view>
		</view>
	
	</view>
</template>

<script setup>
	export default {
		data() {
			return {
				navIndex:0,
				menuList:["历史","人文","军事","政治","财经"],
				newsData:{}
			}
		},
		onLoad() {
			console.log(this.menuList.length)
			this.LoadMenuReq()
			this.LoadNewsDataReq()
		},
		methods: {
			menuClick(i){
				console.log("点击:",i)
				this.navIndex=i
			},
			newsClick(){
				console.log("1222")
				uni.navigateTo({
					url:"/pages/index/newsDetail"
				})
			},
			//动态获取新闻分类栏
			LoadMenuReq(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: (res) => {
						console.log("获取新闻标题:",res)
						this.menuList=res.data
						//[{classname:'国内'，id:'50'}]
					}
				})
			},
			LoadNewsDataReq(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					success: (res) => {
						console.log("新闻内容:", res)
						this.newsData=res.data
						//[{author:'观察者网',classid:'51',hits:'6771',id:'263',picurl:'xx',posttime:'1722043200',title:'xx'}]
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
// .sv{
// 	height: 50px;
// 	 background-color: #ffaa7f;
// 	//border: 2px solid red;
// 	box-sizing: border-box;
// 	.sv_content
// 	{
// 		white-space: nowrap;//不换行显示
// 		.item
// 		{
// 			width: 100px;
// 			height: 40px;
// 			text-align: center;
// 			// background-color: #aaffff;
// 			display: inline-block;//让子物体整行显示
// 			margin-right:10px;
// 			margin-top: 10px;
// 		}
// 	}
// }

.sv{
	position: fixed;//固定定位
	top:var(--window-top);//获取内容区域距顶部的位置--window-top
	//小程序的顶部是将导航栏去掉了，0是从导航栏下面开始计算的，H5是整个页面当成一个部分
	left:0;
	z-index:10;
	height: 80rpx;
	
	background-color: #ffaa7f;
	//border: 2px solid red;
	box-sizing: border-box;
	white-space: nowrap;//不换行显示
	.item
	{
		font-size: 35rpx;
		font-weight: bold;
		display: inline-block;//让子物体整行显示
		line-height: 80rpx;
		//background-color: #aaffff;
		padding: 0 30rpx;
		width: 150rpx;
		&.active{
			color:#0055ff;
		}
	}
}

// deep可以向内部渗透找到uinapp的滚动条
::v-deep ::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}

.news_content{
	padding-top: 90rpx;
	.row{
		//border:1px dashed gray;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
	}
}

</style>